<template>
  <!-- 行业信息 -- 添加其他设施信息 -->
  <view class="addFacilities">
    <view class="wrapper">
      <view class="wrapper-item">
        <u-cell :titleStyle="titleStyle" title="设施名称">
          <text slot="icon" class="required">*</text>
          <u-input v-model="form.deviceName" data-type="workPerson" placeholder="请输入" slot="value" fontSize="14"
            placeholderClass="placeholderClass" inputAlign="right" border="none" :maxlength="8"
            :required="true"></u-input>
        </u-cell>

        <u-cell :titleStyle="titleStyle" title="设施数量">
          <text slot="icon" class="required">*</text>
          <u-input v-model="form.deviceCount" data-type="workPerson" placeholder="请输入" slot="value" fontSize="14"
            placeholderClass="placeholderClass" inputAlign="right" border="none" :maxlength="3" :required="true"
            @blur="deviceCountBlur"></u-input>
        </u-cell>

        <u-cell :titleStyle="titleStyle" title="设施照片" :border="false">
          <text slot="icon" class="required">*</text>
        </u-cell>
        <view class="upload-view">
          <u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="file" :maxCount="1" width="96"
            height="90">
            <image :src="baseImgUrl + 'upload-icon.png'" style="width: 192rpx; height: 180rpx"></image>
          </u-upload>
        </view>
      </view>
    </view>

    <view class="btns">
      <button class="reset-btn lt cancelBtn" type="primary" @click="navBack()">
        取消
      </button>
      <button class="submit-btn" type="primary" @click="sunmitHandle">
        保存
      </button>
    </view>
  </view>
</template>

<script>
  import {
    handleClickRouter,
    Toast,
    navBack,
    uniTrim,
    isNumberTwo,
    formatters,
    dayTurnTime,
    useNetWork,
    isLoading,
    getHeader,
    uploadFile,
  } from "@/utils/util.js";

  export default {
    name: "addFacilities",
    data() {
      return {
        baseImgUrl: this.$baseImgUrl,
        baseURL: this.$baseURL,
        form: {},
        errorType: ["none"],
        fileList: [],
        imgPrefix: uni.getStorageSync("imgPrefix"),
        dataList: [],
      };
    },
    onShow() {
      this.dataList = uni.getStorageSync("industryList") || [];
    },
    methods: {
      handleClickRouter,
      navBack,
      deviceCountBlur() {
        let {
          deviceCount
        } = this.form;
        if (deviceCount && !isNumberTwo(deviceCount)) {
          Toast("器材数量请输入正整数");
          return;
        }
      },
      afterRead(info) {
        useNetWork(); // 判断是否有网络
        isLoading();
        let _this = this;

        uploadFile({
            url: "/web/sys/upload/upload_file",
            filePath: info.file.url,
            name: "file",
            formData: {
              type: 8,
            },
          })
          .then((res) => {
            let {
              fullPath,
              halfPath
            } = res.result;
            this.fileList.push({
              url: fullPath
            });
            this.form.deviceImage = halfPath;
          })
          .finally(() => {
            isLoading(false);
          })
      },
      deletePic() {
        this.fileList = [];
        this.form.deviceImage = "";
      },
      sunmitHandle() {
        let {
          deviceName,
          deviceCount,
          deviceImage
        } = this.form;

        if (!deviceName || !uniTrim(deviceName)) {
          Toast("请输入设施名称");
          return;
        }

        if (!deviceCount || !uniTrim(deviceCount)) {
          Toast("请输入器材数量");
          return;
        }

        if (!isNumberTwo(deviceCount)) {
          Toast("器材数量请输入正整数");
          return;
        }

        if (!deviceImage) {
          Toast("请上传设施照片");
          return;
        }

        let data = {
          deviceName: deviceName,
          deviceCount: deviceCount,
          deviceImage: deviceImage,
          addTimeDesc: formatters(new Date(), "YY/MM/DD HH:mm:ss"),
          addTime: dayTurnTime(formatters(new Date(), "YY/MM/DD HH:mm:ss")),
        };

        this.dataList.unshift(data);
        console.log(this.dataList, "保存");
        uni.setStorageSync("industryList", this.dataList);
        Toast("保存成功");
        navBack();
      },
    },
  };
</script>

<style>
  page {
    background-color: #f3f3f3 !important;
    height: 100%;
  }
</style>
<style lang="scss" scoped>
  .addFacilities {
    flex: 1;
    background: #f9f9f9;

    .wrapper {
      height: calc(100vh - 92px);
      margin: 20rpx;
      overflow-y: auto;

      .wrapper-item {
        padding: 20rpx;
        margin-bottom: 20rpx;
        background: #fff;

        .upload-view {
          padding-left: 30rpx;
        }
      }
    }

    .btns {
      button {
        border-radius: 44rpx;
      }
    }
  }
</style>